<template>
    <div class="news">
        <div class="n-item" v-for="(item,index) in newsList" :key="index" @click="navTo(item)">
            <div class="n-item-img">
               <img :src=item.imgUrl alt="">
            </div>
            <div class="s-item-right">
                <p class="s-item-right-tit">{{item.title}}</p>
                <p class="s-item-right-time">{{item.time}}</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'news',
    props:{
        newsList:Array
    },
    methods:{
        navTo(item){
            this.$router.push({path:'/consultation/details'});
        }
    }
}
</script>
<style lang='less' scoped>
    img{
        width: 100%;
        height: 100%;
    }
    .news{
        display: flex;
        flex-direction: column;
        width: 100%;
        .n-item{
            display: flex;
            padding: .24rem .56rem 0 .23rem;
            .n-item-img{
                width: 1.34rem;
                height: 1.34rem;
                border-radius: .05rem;
                overflow: hidden;
            }
            .s-item-right{
                margin-left: .24rem;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                width: 5.12rem;
                .s-item-right-tit{
                    font-size: .28rem;
                    color: #2F2F2F;
                    font-weight: 600;
                    word-break: break-all;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
                .s-item-right-time{
                    font-size: .22rem;
                    color: #828181;
                }
            }
        }
        .n-item:first-of-type{
            padding-top: 0;
        }
    }
</style>